<template>
    <div wh-full color-grey-100>
        <n-flex vertical>
            <n-card flex-1 title="图标展示" size="small" segmented>
                <n-space>
                    <app-icon-select-card v-model:value="selectIcon" w-600px :show="visiable" @update:value="handleSelect" />
                    <app-icon-select-card v-model:value="selectIcon" w-600px :show="visiable" @update:value="handleSelect" />
                </n-space>
            </n-card>
            <n-card flex-1 title="弹窗展示" size="small" segmented>
                <n-flex vertical w-full>
                    <n-el>
                        <n-divider title-placement="left">弹窗展示</n-divider>
                        <n-flex w-full>
                            <n-button flex-1 block @click="show">
                                <template v-if="selectIcon" #icon>
                                    <app-icon :icon="selectIcon" />
                                </template>
                                选择图标
                            </n-button>
                            <n-button flex-1 block @click="show">
                                <template v-if="selectIcon" #icon>
                                    <app-icon :icon="selectIcon" />
                                </template>
                                选择图标
                            </n-button>
                            <n-button flex-1 block @click="show">
                                <template v-if="selectIcon" #icon>
                                    <app-icon :icon="selectIcon" />
                                </template>
                                选择图标
                            </n-button>
                            <n-button flex-1 block @click="show">
                                <template v-if="selectIcon" #icon>
                                    <app-icon :icon="selectIcon" />
                                </template>
                                选择图标
                            </n-button>
                            <n-button flex-1 block @click="show">
                                <template v-if="selectIcon" #icon>
                                    <app-icon :icon="selectIcon" />
                                </template>
                                选择图标
                            </n-button>
                        </n-flex>

                        <app-icon-select-modal :show="visiable" @update:value="handleSelect" @close="hide" />
                    </n-el>
                    <n-el>
                        <n-divider title-placement="left">表单组件展示</n-divider>
                        <n-flex :wrap="false">
                            <app-icon-select v-model:value="selectIcon" clearable />
                            <app-icon-select v-model:value="selectIcon" clearable />
                            <app-icon-select v-model:value="selectIcon" clearable />
                            <app-icon-select v-model:value="selectIcon" clearable />
                            <app-icon-select v-model:value="selectIcon" clearable />
                            <app-icon-select v-model:value="selectIcon" clearable />
                        </n-flex>
                    </n-el>
                </n-flex>
            </n-card>
        </n-flex>
    </div>
</template>

<script lang="ts" setup>
import { AppIcon, AppIconSelect, AppIconSelectCard, AppIconSelectModal } from "@scpun/components";
import { useVisiable } from "@scpun/hooks";

const selectIcon = ref<string>();

const { visiable, show, hide } = useVisiable();

function handleSelect(value: string) {
    selectIcon.value = value;
}
</script>
